<template>
  	<div class="changeCen-right-tableData-content">
        <p>
            <span v-for="(item,id) in heads" :key="id">{{item.name}}</span>
        </p>
        <ul class="changeCen-right-tableData-content-list">
            <li v-for="(rowItem,rowId) in dataArr" :key="rowId">
                <span v-for="(elItemKey,keyId) in keysArr" :key="keyId">{{ rowItem[elItemKey] }}</span>
            </li>
        </ul>
    </div>
</template>
<script>
export default {
  name: "myTable",
  props:{
    heads:{//标题   {key：''标题对应数据的key,name:''//标题名称}
        type:Array,
        default:[{
            key:'customerShortName',
            name:'分公司名称'
        },{
            key:'noPay',
            name:'应收账款'
        }],
    },
    dataArr:{ // 数据 {(数据key,数据value)}
        type:Array,
        default:[
           {
            customerShortName:"客五",
            noPay:10960.11,
           },
        ]
    }
  },
  mounted() {
      this.setData()
  },
  data() {
    return {
        keysArr:[]
    }
  },
  methods: {
      setData(){
          var rowArr = []
          this.heads.forEach((item,index)=>{
            var key = item.key
            this.keysArr.push(item.key)
            // dataArr.forEach((dataItem,dataId)=>{
            //      var dataNewId  = Object.keys(dataItem).indexOf(key)
            //      var dataNewItem = {}

            // })
          })
      },
    }
  }
</script>
<style scoped>

.changeCen-right-tableData-content {
  position: relative;
}
.changeCen-right-tableData-content:after {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  width: 1px;
  height: 730px;
  background-color: rgba(47, 240, 210, 0.3);
}
.changeCen-right-tableData-content p {
  display: flex;
  margin-top: 40px;
  margin-bottom: 0;
  color: #2ff0d2;
  font-size: 18px;
  border-bottom: 1px solid rgba(47, 240, 210, 0.3);
}
.changeCen-right-tableData-content p span {
  width: calc(100% / 5);
  height: 62px;
  line-height: 62px;
  text-align: center;
}
.changeCen-right-tableData-content-list {
  padding-top: 34px;
  padding-bottom: 34px;
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 0;
  list-style: none;
}
.changeCen-right-tableData-content-list li {
  display: flex;
  margin-bottom: 34px;
  color: #2ff0d2;
  font-size: 18px;
}
.changeCen-right-tableData-content-list li span {
  width: calc(100% / 5);
  text-align: center;
}
.changeCen-i {
  display: inline-block;
  width: 3px;
  height: 14px;
  margin-top: 6px;
  margin-right: 6px;
  background-color: #2ff0d2;
}
</style>
